{% extends "base.html" %}
{% block title %}Flight{% endblock %}
{% block scripts %}
<script>
  $(document).ready(function() {
    var flight = '{{ flight.key.urlsafe() }}';
    $('#nav-flight').removeClass('hide').addClass('active');
    $('.instructor-input').change(LookupInstructor);

    // Photo carousel stuff.
    $('#upload').change(function(ev) {
      $('#photo-form').submit();
    });
    $('.item:first').addClass('active');

    // Set size of Landing input elements.
    $('.landings').css('width', '56px');
    var inputHeight = $('.landings:first').css('height');
    $('.landing-label').css('height', inputHeight)
    $('#addlanding input[name=airport]').width('40px');
    $('#addlanding input[name=runway]').width('50px');
    $('#addlanding input[name=landings]').width('39px');

    var LandingChangeHandler = function(ev) {
      ev.preventDefault();
      var form = $(this);
      $.ajax({
          type: form.attr('method'),
          url: form.attr('action'),
          data: form.serialize(),
          dataType: 'json',
          success: function(data) {
            console.log(data);
            if (data.deleted) {
              form.remove();
            } else {
              form.find('input[name="landings"]').val(data.landings);
            }
          }
      });
    }

    $('#landings-container').find('form').change(LandingChangeHandler);

    var NewLandingForm = function(data) {
      var inputWidth = $('.landings').css('width');
      var form = $('<form class="form-inline" action="/landings" method="POST" />');
      $('<input type="hidden" name="airport" />').appendTo(form).val(data.airport);
      $('<input type="hidden" name="flight" />').appendTo(form).val(flight);
      $('<input type="hidden" name="runway" />').appendTo(form).val(data.runway);
      var label = $('<label class="landing-label"/>').css('height', inputHeight).appendTo(form);
      label.html(data.airport + ' runway ' + data.runway);
      var input = $('<input type="number" class="form-control landings pull-right" name="landings" />')
      input.appendTo(form).css('width', inputWidth).val(data.landings);
      form.appendTo('#landings-container');
      form.change(LandingChangeHandler);
    }

    $('#addlanding').submit(function(ev) {
      ev.preventDefault();
      var form = $(this);
      form.find('button').prop('disabled', true);
      $.ajax({
          type: form.attr('method'),
          url: form.attr('action'),
          data: form.serialize(),
          dataType: 'json',
          success: function(data) {
            console.log(data);
            NewLandingForm(data);
            form.find('button').prop('disabled', false);
            form[0].reset();
          }
      });
    });

    $('.simple-ajax-form').submit(function(ev) {
      ev.preventDefault();
      var form = $(this);
      $.ajax({
          type: form.attr('method'),
          url: form.attr('action'),
          data: form.serializeArray(),
          error: function(xhr, msg, err) {
            console.log(xhr);
            console.log(msg);
            console.log(err);
          },
      });
    });

    $('#add-approach').click(function() {
      var controls = $('#approach-form').find('div.form-group');
      $('<input type="text" class="form-control" name="approach" />').appendTo(controls);
    });

    $('.remove-passenger').click(function() {
      $(this).parentsUntil('#passenger-container').remove();
    });

    $('#addpassenger').click(function() {
      var passenger = $('#addpassenger-input').val();
      var newPassenger = $('<div class="form-group" />').appendTo('#passenger-container');
      var inputGroup = $('<div class="input-group passenger" />').appendTo(newPassenger);
      $('<input type="text" class="form-control input-small" name="passenger" />').val(passenger).appendTo(inputGroup);
      var span = $('<span class="input-group-btn" />').appendTo(inputGroup);
      var button = $('<button type="button" class="btn btn-small remove-passenger" />').appendTo(span);
      button.click(function() {
        newPassenger.remove();
      });
      $('<span class="glyphicon glyphicon-remove" />').appendTo(button);
    });

    var sigPad = $('.sigPad').signaturePad({
        drawOnly: true,
        lineTop: 140,
        output: '.signature',
        validateFields: false,
    });
    var instructorSignature = '{{ instructor.signature if instructor is defined and instructor.signature }}';
    if (instructorSignature != '') {
      sigPad.regenerate(instructorSignature);
    }

  });
</script>
{% endblock scripts %}

{% block body %}
<div class='container'>
  {% if flight.start_airport %}
  <h3>{{ "Flight from %s to %s on %s in %s"|format(flight.start_airport.id(), flight.end_airport.id(), flight.date, aircraft.key.id()) }}</h3>
  {% else %}
  <h3>{{ "Simulated flight in %s on %s"|format(aircraft.key.id(), flight.date) }}</h3>
  {% endif %}
  <div class="col-sm-5 col-lg-4 well well-small">
    <form action='/flight' class='simple-ajax-form' method='POST'>
      <input type='hidden' name='flight' value='{{ flight.key.urlsafe() }}'>
      <fieldset>
        <legend>Flight time</legend>
        <div class='form-group'>
          <label>PIC hours</label>
          <input type='text' class='form-control' name='pic_hours' placeholder='# hours' value='{{ flight.pic_hours if flight.pic_hours }}'>
        </div>
        <div class='form-group'>
          <label>Dual instruction hours</label>
          <input type='text' class='form-control' name='dual_hours' placeholder='# hours' value='{{ flight.dual_hours if flight.dual_hours }}'>
        </div>
        <div class='form-group'>
          <label>Cross-country hours</label>
          <input type='text' class='form-control' name='xc_hours' placeholder='# hours' value='{{ flight.xc_hours if flight.xc_hours }}'>
        </div>
        <div class='form-group'>
          <label>IMC hours</label>
          <input type='text' class='form-control' name='imc_hours' placeholder='# hours' value='{{ flight.imc_hours if flight.imc_hours }}'>
        </div>
        <div class='form-group'>
          <label>Simulated IMC hours</label>
          <input type='text' class='form-control' name='sim_imc_hours' placeholder='# hours' value='{{ flight.sim_imc_hours if flight.sim_imc_hours }}'>
        </div>
        <div class='form-group'>
          <label>Simulator hours</label>
          <input type='text' class='form-control' name='simulator_hours' placeholder='# hours' value='{{ flight.simulator_hours if flight.simulator_hours }}'>
        </div>
        <div class='form-group'>
          <label>Ground instruction hours</label>
          <input type='text' class='form-control' name='ground_instruction_hours' placeholder='# hours' value='{{ flight.ground_instruction_hours if flight.ground_instruction_hours }}'>
        </div>
        <div class='form-group'>
          <label>Night hours</label>
          <input type='text' class='form-control' name='night_hours' placeholder='# hours' value='{{ flight.night_hours if flight.night_hours }}'>
        </div>
      </fieldset>
      <fieldset>
        <legend>People</legend>
          <label>Passengers</label>
          <div id='passenger-container'>
            {% for passenger in flight.passengers %}
              <div class='form-group'>
                <div class='input-group'>
                  <input type='text' class='form-control input-small' name='passenger' value='{{ passenger }}'>
                  <span class='input-group-btn'>
                    <button type='button' class='btn btn-small remove-passenger'>
                      <span class='glyphicon glyphicon-remove'></span>
                    </button>
                  </span>
                </div>
              </div>
            {% endfor %}
          </div>
          <div class='form-group'>
            <div class='input-group'>
              <input id='addpassenger-input' type='text' class='form-control input-small' name='passenger' placeholder='Passenger'>
              <span class='input-group-btn'>
                <button id='addpassenger' type='button' class='btn btn-small'>
                  <span class='glyphicon glyphicon-plus'></span>
                </button>
              </span>
            </div>
          </div>
      </fieldset>
      <fieldset>
        <legend>Flight info</legend>
        <div class='form-group'>
          <label>Filed route</label>
          <textarea rows='4' class='form-control' name='filed_route' placeholder='Filed route'>{{ flight.filed_route if flight.filed_route }}</textarea>
        </div>
        <div class='form-group'>
          <label>Cost</label>
          <div class='input-group'>
            <span class='input-group-addon glyphicon glyphicon-usd'></span>
            <input type='text' class='form-control' name='cost' placeholder='Cost' value='{{ flight.cost if flight.cost }}'>
          </div>
        </div>
        <div class='form-group'>
          <label>Remarks</label>
          <textarea rows='4' class='form-control' name='remarks' placeholder='Remarks'>{{ flight.remarks if flight.remarks }}</textarea>
        </div>
        <button type='submit' class='btn btn-primary'>Save</button>
      </fieldset>
    </form>
  </div><!-- Flight data -->
  <div class="col-sm-7 col-lg-4 well well-small">
    <legend>Landings</legend>
    <div id='landings-container'>
      {% for airport, runways in landings.iteritems() %}
        {% for runway, landings in runways.iteritems() %}
          <form class='form-inline landing-form' action='/landings' method='POST'>
            <input type='hidden' name='airport' value='{{ airport }}'>
            <input type='hidden' name='flight' value='{{ flight.key.urlsafe() }}'>
            <input type='hidden' name='runway' value='{{ runway }}'>
            <label class='landing-label'>
              {{ "%s runway %s"|format(airport, runway) }}
            </label>
            <input type='number' class='form-control landings pull-right' name='landings' value='{{ landings }}'>
          </form>
        {% endfor %}
      {% endfor %}
    </div>
    <form class='form-inline' id='addlanding' action='/landings' method='POST'>
      <input type='hidden' name='flight' value='{{ flight.key.urlsafe() }}'>
      <input type='text' class='form-control' name='airport' placeholder='ID' required='required'>
      <input type='text' class='form-control' name='runway' placeholder='runway' required='required'>
      <input type='number' class='form-control' name='landings' placeholder='# landings' required='required'>
      <button type='submit' class='btn btn-primary'>Add</button>
    </form>
  </div><!-- Landings -->
  <div class="col-sm-7 col-lg-4 well well-small">
    <legend>Instrument Approaches</legend>
      <form class='simple-ajax-form' id='approach-form' action='/saveapproaches' method='POST'>
        <fieldset>
          <div class='form-group'>
            <input type='hidden' name='flight' value='{{ flight.key.urlsafe() }}'>
            {% for approach in flight.approaches %}
            <input type='text' class='form-control' name='approach' value='{{ approach }}'>
            {% endfor %}
          </div>
          <button type='button' id='add-approach' class='btn'>Add</button>
          <button type='submit' class='btn btn-primary'>Save</button>
        </fieldset>
      </form>
  </div><!-- Approaches -->
  <div class="col-sm-10 col-lg-8 well well-small">
    <legend>Instructor</legend>
    <form class='simple-ajax-form sigPad' id='instructor-form' action='/instructor' method='POST'>
      <input type='hidden' name='instructor' value='{{ instructor.key.urlsafe() if instructor }}'>
      <input type='hidden' name='flight' value='{{ flight.key.urlsafe() }}'>
      <div class='form-group'>
        <label>Instructor Name</label>
        <input type='text' class='form-control instructor-input' name='name' placeholder='Name' value='{{ instructor.name if instructor }}'>
      </div>
      <div class='form-group'>
        <label>Certificate number</label>
        <input type='text' class='form-control' name='cert' placeholder='Certificate number' value='{{ instructor.cert if instructor and instructor.cert }}'>
      </div>
      <div class='form-group'>
        <label>Certificate expiration</label>
        <input type='date' class='form-control' name='expiration' placeholder='Expiration' value='{{ instructor.expiration if instructor and instructor.expiration }}'>
      </div>
      <div class='form-group'>
        <label>Signature</label>
        <div class='sig sigWrapper control-group'>
          <input type='hidden' name='signature' class='signature'>
          <canvas class='pad' width='500' height='150'></canvas>
        </div>
      </div>
      <div class='form-group'>
        <button type='button' class='btn clearButton'>Clear signature</button>
        <button type='submit' class='btn btn-primary'>Save</button>
      </div>
    </form>
  </div>
  <div class="col-12 col-lg-12">
    {% if flight.photo_urls %}
    <div id="photos" class="carousel slide">
      <!-- Carousel items -->
      <div class="carousel-inner">
        {% for photo in flight.photo_urls %}
        <div class="item"><img class="img-responsive" src="{{ photo }}" alt=""/></div>
        {% endfor %}
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#photos" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
      </a>
      <a class="carousel-control right" href="#photos" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
      </a>
    </div>
    {% endif %}
    <div>
      <form id="photo-form" class="form-inline" action="{{ upload_url }}" method="POST" enctype="multipart/form-data">
        <label for="upload">Upload a photo
          <input type="file" name="upload" id="upload">
          <input type="hidden" name="flight" value="{{ flight.key.urlsafe() }}">
        </label>
      </form>
    </div>
  </div><!-- Photos -->
</div><!-- Top level .container -->
{% endblock body %}
